{% extends 'base.html' %}
{% block css %}
.centered-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.centered-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -20vh;  /* 页面大小的40% */
}

.logo-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;  /* 如果需要，可以增加logo和搜索框之间的距离 */
}

.main-logo {
    width: 30%;  /* logo的宽度为搜索框宽度的70% */
}

.setting-button {
    position: fixed;
    right: 30px;
    bottom: 15px;
    width: 50px;  /* 可根据需要调整按钮的大小 */
    height: 50px;
}
{% endblock %}
{% block content %}
<div class="alert alert-danger hide fade" id="alert-danger"></div>
<div class="alert alert-success hide fade" id="alert-success"></div>
<div class="centered-wrapper">
    <div class="search-body">
        <div class="centered-container">
            <div class="logo-container">
                <img src="/static/images/logo-big.png" alt="Logo" class="main-logo">
            </div>
            <form action="" method="post" onsubmit="return false;" class="my-search-form">
                {% csrf_token %}
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" id="keyword" name="keyword"
                               placeholder="请输入要查询的关键词">
                        <div class="input-group-append">
                            <div class="btn btn-outline-secondary icon-button" type="button" id="search-button" onclick=search()>
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <a href="/page/setting" class="setting-button">
        <img src="/static/images/setting.png" alt="Setting">
    </a>
</div>
{% endblock %}

{% block script %}
    <script>

        $("#keyword").keypress(function (e) {
            if (e.which === 13) {
                search();
            }
        });

        function checkSubmit() {
            if ($("#keyword").val() === '') {
                showAlert("#alert-danger", "输入内容为空，请填写内容后再提交")
                return false;
            }
            return true;
        }

        function search() {
            if (checkSubmit() === false) return;

            let keyword = $("#keyword").val();
            var data_obj = {
                "keyword": keyword,
                "page": 1,
            }

            var temp = document.createElement("form");
            temp.action = "/api/search";
            temp.method = "post";
            temp.style.display = "none";

            for (var x in data_obj) {
                var opt = document.createElement("textarea");
                opt.name = x;
                opt.value = data_obj[x];
                temp.appendChild(opt);
            }

            document.body.appendChild(temp);
            temp.submit();
        }

    </script>
{% endblock %}